<?php require_once('header.php');?>
<link rel="shortcut icon" type="image/x-icon" href="<?php echo base_url();?>sknimg/img/isee.ico" />
 <script type='text/javascript' src="<?php echo base_url();?>sknimg/js/jquery-1.4.2.js"></script>
 	<link href="<?php echo base_url();?>sknimg/css/userarea.css" rel="stylesheet" type="text/css" />
<style type="text/css">

/* Page styles */

h1,h2,h3,p,td,quote,small,form,input,li,ol,label{
	margin:0;
	padding:0;
}

/* Form & timeline styles */

#twitter-container{
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;

	border:6px solid #D3F8C9;

	padding:10px;

	font-size:11px;
	font-family:'Lucida Grande',sans-serif;
	color:#333333;
}

label{
	font-size:20px;
	display:block;
}

.counter{
	color:#CCCCCC;
	float:right;
	font-family:Georgia,serif;
	font-size:32px;
	font-weight:bold;
	height:40px;
	overflow:hidden;
}

textarea{
	width:594px;
	height:38px;
	margin:5px 0 10px 0;

	border:1px solid #AAAAAA;
	padding: 4px 2px;

	font-family:'Lucida Grande',sans-serif;
	overflow:auto;
	font-size:14px;
}

.clear{
	clear:both;
}

.submitButton{
	color:#666666;
	font-size:14px;
	height:32px;
	width:115px;

	-moz-border-radius:6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;

	border:1px solid #cccccc;
	background:url(img/button_bg.gif) repeat-x #f5f5f5;

	cursor:pointer;
	float:right;
}

.submitButton:hover{
	background-position:bottom;
	border-color:#dddddd;
	color:#333333;
}

.inact,.inact:hover{
	background:#f5f5f5;
	border:1px solid #eeeeee;
	color:#aaaaaa;
	cursor:auto;
}

.latest{
	color: #666666;
}

ul.statuses{
	margin:10px 0;
	pading:0;
}

ul.statuses li {
	position:relative;
	border-bottom:1px dashed #D2DADA;
	padding:15px 15px 15px 10px;
	list-style:none;
	font-size:14px;
}

ul.statuses li:first-child{
	border-top:1px dashed #D2DADA;
}

ul.statuses li:hover {
	background-color:#F7F7F7;
}

h3.timeline{
	margin-top:20px;
	color:#999999;
	font-size:20px;
	font-weight:normal;
}

div.tweetTxt{
	overflow:hidden;
}

ul.statuses a img.avatarecho{
	float:left;
	margin-right:10px;
	border:1px solid #446600;
}
div.date{
	line-height:18px;
	font-size:12px;
	color:#999999;
}

li a, li a:visited {
	color:#007bc4;
	text-decoration:none;
	outline:none;
}

li a:hover{
	text-decoration:underline;
}


	</style>		
 <script type='text/javascript'>
 $(document).ready(function(){

		$('#inputField').bind("blur focus keydown keypress keyup", function(){recount();});
		$('input.submitButton').attr('disabled','disabled');

		$('#tweetForm').submit(function(e){

			tweet();
			e.preventDefault();

		});

	});

	function recount()
	{
		var maxlen=140;
		var current = maxlen-$('#inputField').val().length;
		$('.counter').html(current);

		if(current<0 || current==maxlen)
		{
			$('.counter').css('color','#D40D12');
			$('input.submitButton').attr('disabled','disabled').addClass('inact');
		}
		else
			$('input.submitButton').removeAttr('disabled').removeClass('inact');

		if(current<10)
			$('.counter').css('color','#D40D12');

		else if(current<20)
			$('.counter').css('color','#5C0002');

		else
			$('.counter').css('color','#cccccc');

	}

	function tweet()
	{
		var submitData = $('#tweetForm').serialize();

		$('.counter').html('<img style="padding:12px" src="img/ajax_load.gif" alt="loading" width="16" height="16" />');

		$.ajax({
			type: "POST",
			url: "<?php echo base_url()?>engine/post/submit/",
			data: submitData,
			dataType: "html",
			success: function(msg){

				if(parseInt(msg)!=0)
				{
					$('ul.statuses li:first-child').before(msg);
					$("ul.statuses:empty").append(msg);

					$('#lastTweet').html($('#inputField').val());

					$('#inputField').val('');
					recount();
				}
			}

		});

	}
	function getComment(post_id){
		$.ajax({
			type: "POST",
			url: "<?php echo base_url()?>engine/comment/getComment/"+post_id,
			dataType: "html",
			success: function(msg){
				$('#commentlist_'+post_id).html(msg);
			}

		});
	}
 </script>
</head>
<body>
	<div id="wraper">
			<div id="headeruser">
					<div class="logo"><a href="<?php echo base_url()?>dashboard"><img src="<?php echo base_url();?>sknimg/images/transp_user.png" border="0" /></div>
				<div class="nav">
					<ul>			
	
						<li><a href="<?php echo base_url()?>settings/info">Settings </a></li>
						<li><a href="<?php echo base_url()?>home/logout">Logout</a></li>
				
					</ul>					
				</div>	
			</div>
			<div class="skin">
				<div id="content">
				<div class="namauser"></a><a href="<?php echo base_url()?>profile/info"><?php echo $nama?></a></div>
					<div class="leftdas">
						<div class="leftdas2">
							<ul>
								<li><a href='<?php echo base_url()?>dashboard/'>My Echo </a></li>
								<li><a href='<?php echo base_url()?>dashboard/publicEcho'>Public Echo </a></li>
								<li><a href='<?php echo base_url()?>notifikasi'>Notifikasi </a></li>
							</ul>
						</div>
					</div>
					
					<div class="rightdas">
						<div id="twitter-container">
							<form id="tweetForm" action="<?php echo base_url()?>engine/post/submit/" method="post">
							
								<span class="counter">140</span>
								<label for="inputField">Echo Something Here</label>
								<textarea name="inputField" id="inputField" tabindex="1"rows="2" cols="40"></textarea>
								<input class="submitButton inact" name="submit" type="submit" value="update" />
								<span class="latest"><strong>Latest: </strong><span id="lastTweet"><?php if($myLastEcho){?><?php echo $myLastEchoMsg?><?php }?></span></span>
								<div class="clear"></div>
							</form>
						
							<h3 class="timeline">ECHO</h3>
							<ul class="statuses">
							<?php if($myEcho){?>
								<?php echo $myEchoMsg?>
							<?php }else{?>
								<li id="noEcho">Anda belum pernah memberikan Echo kepada I-See</li>
							<?php }?>
							</ul>
						</div>
				</div>
	
			<div class="cls"></div>
			</div>	
	</div>	
	
	<!--footer start -->
	<?php require_once('footer.php');?>
	
	<!--footer end -->
</div>		
</bod